<template>
  <div
    class=""
    style="
      background-color: #fff;
      padding-left: 10px;
      padding-top: 20px;

      min-height: calc(100vh - 100px);
    "
  >
    <div class="b" style="font-size: 18px; margin-bottom: 18px">药历</div>
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="药历" name="first">
        <keep-alive><MedicineIndex /></keep-alive>
      </el-tab-pane>
      <el-tab-pane label="药学监护分级表" name="second"
        ><Tutelage
      /></el-tab-pane>
      <el-tab-pane label="用药咨询意见" name="third"><Opinion /></el-tab-pane>
      <el-tab-pane label="会诊意见" name="fourth"><Consultation /></el-tab-pane>
      <el-tab-pane label="患者用药教育" name="six"><Education /></el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Back from "@/components/Back/index";
import Consultation from "./medicineView/consultation";
import Education from "./medicineView/education";
import Opinion from "./medicineView/opinion";
import MedicineIndex from "./medicineView/medicineIndex";
import Tutelage from "./medicineView/tutelage";
export default {
  name: "medicine",
  components: {
    Back,
    Consultation,
    Education,
    MedicineIndex,
    Opinion,
    Tutelage,
  },
  data() {
    return { activeName: "first" };
  },
  methods: {
    handleClick(tab, event) {
      switch (tab.name) {
        case "second":
          console.log(tab);
          tab.$children[0].getList();
          break;
        case "third":
          console.log(tab);
          tab.$children[0].getList();
          break;
        case "fourth":
          console.log(tab);
          tab.$children[0].getList();
          break;
        // case "five":
        //   console.log(tab);
        //   tab.$children[0].getList();
        //   break;
        case "six":
          console.log(tab);
          tab.$children[0].getList();
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-tabs__item.is-active {
  background-color: rgba(18, 146, 185, 0.298039215686275);
  color: rgb(18, 146, 185);
}
::v-deep .el-tabs__item:hover {
  color: rgb(18, 146, 185);
}

::v-deep .el-tabs--card > .el-tabs__header {
  border-bottom: none;
}
::v-deep .el-tabs--card .el-tabs__item{
  border-bottom: 1px solid #dfe4ed !important;
}
</style>
